<html>
    <head>
		<link rel="stylesheet" href="${resource(dir:'css', file:'ui.daterangepicker.css')}" />
		<link rel="stylesheet" href="${resource(dir:'css/redmond', file:'jquery-ui-1.7.1.custom.css')}" />
		<g:javascript library="jquery" plugin="jquery"/>
		<g:javascript src="jquery-1.3.1.min.js" />
		<g:javascript src="jquery-ui-1.7.1.custom.min.js" />
		<g:javascript src="daterangepicker.jQuery.js" />
		<script type="text/javascript">
			$(function(){
				  $('#rangeA').daterangepicker({
					  arrows:true,
					  dateFormat: 'dd/mm/yy',
					  onChange: function(){
						  					var query = $('#rangeA').val();
						  					${remoteFunction(action:'test', params:'\'query=\' + query')};
				  				}
 					  });
			 });
		</script>
    </head>
    <body>
    	<input style="width: 165px; height: 1.4em; display:block;" type="text" value="Insert date range" id="rangeA" />
    </body>
</html>
